<template>
  <div class="app-container">
    <div class="homeBox">
      <div class="homeLeftBox">
        <div class="liaotianTop">
          <div class="headItem">
            <el-button type="primary">游戏前台</el-button>
          </div>
          <div class="headItem">
            <el-button type="primary">在线客服</el-button>
          </div>
          <div class="headItem">
            <el-button type="primary">打开统计</el-button>
          </div>
        </div>
        <div class="liaotianCon">
          <div v-for="(itemc, indexc) in 5" :key="indexc">
            <!-- 对方 -->
            <div class="word">
              <img src="../../assets/404_images/404.png">
              <div class="info">
                <p class="time">
                  对方名称
                </p>
                <div class="info-content">内容</div>
              </div>
            </div>
            <!-- 我的 -->
            <div class="word-my">
              <div class="info">
                <p class="time">
                  我的名称
                </p>
                <div class="info-content">内容</div>
              </div>
              <img src="../../assets/404_images/404.png">
            </div>
          </div>
        </div>
        <div class="liaotianBot">
          <el-input v-model="memo" placeholder="输入信息" />
          <div class="headItem">
            <el-button type="primary">发送</el-button>
          </div>
          <div class="headItem">
            <el-button type="primary">快捷回复</el-button>
          </div>
        </div>
      </div>
      <div class="homeRightBox">
        <div :class="{'fixed-header':fixedHeader}">
          <tags-view v-if="needTagsView" />
        </div>
        <div class="headConBox">
          <div class="conLeftBox">
            <div class="homeNavBox">
              <div class="homeNavBoxItem homeNavBoxItemTow">
                <img src="../../assets/404_images/404.png" alt="">
              </div>
              <div class="homeNavBoxItem">
                <p>彩票流水</p>
                <h3>55000</h3>
              </div>
              <div class="homeNavBoxItem">
                <p>彩票总盈亏</p>
                <h3 style="color: #d9535c;">-5500</h3>
              </div>
              <div class="homeNavBoxItem">
                <p>彩票盈亏</p>
                <h3 style="color: #d9535c;">-6350</h3>
              </div>
              <div class="homeNavBoxItem">
                <p>彩票回水</p>
                <h3>145</h3>
              </div>
            </div>
            <div class="leftFormBox">
              <div class="formList">
                <div class="formListIt">
                  秒速赛车
                </div>
                <div class="formListIt">
                  2023494期
                </div>
                <div class="formListIt">
                  本期流水0
                </div>
                <div class="formListIt">
                  今日流水19928
                </div>
                <div class="formListIt">
                  今日盈亏899
                </div>
                <div class="formListIt">
                  00:00:48
                </div>
              </div>
              <div class="showListBox">
                <div class="showListHear">
                  <div class="showListHearIt">
                    会员编号
                  </div>
                  <div class="showListHearIt">
                    用户名
                  </div>
                  <div class="showListHearIt">
                    昵称
                  </div>
                  <div class="showListHearIt">
                    余额
                  </div>
                  <div class="showListHearIt">
                    真猜总数
                  </div>
                  <div class="showListHearIt">
                    上期盈亏
                  </div>
                  <div class="showListHearIt">
                    今日盈亏888
                  </div>
                </div>
                <div class="showListHear">
                  <div class="showListHearIt">
                    23141343
                  </div>
                  <div class="showListHearIt">
                    zxvz
                  </div>
                  <div class="showListHearIt">
                    昵称
                  </div>
                  <div class="showListHearIt">
                    324.00
                  </div>
                  <div class="showListHearIt">
                    3423.00
                  </div>
                  <div class="showListHearIt">
                    0.00
                  </div>
                  <div class="showListHearIt">
                    123/3525/50 大500 <div class="headItem">
                      <el-button type="primary">详情</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="conRightBox">
            <div class="erweimaBox">
              <div class="erweimaBoxText">
                <div class="erweimaBoxTextIt">
                  微信登录二维码
                </div>
                <div class="erweimaBoxTextIt">
                  APP下载二维码
                </div>
                <div class="erweimaBoxTextIt">
                  QQ登录二维码
                </div>
              </div>
              <div class="erweimaBoxImg">
                <img src="../../assets/404_images/404.png" alt="">
                <div class="erweimaBoxImgIt">
                  微信登录二维码
                </div>
              </div>
            </div>
            <div class="rightTitle">
              <p>查回审核</p>
            </div>
            <div class="rightFormBox">
              <el-table
                :data="auditList"
                style="width: 100%"
                border
                :cell-style="{padding:0+'px'}"
                :row-style="{ height: '20px' }"
              >
                <el-table-column prop="name" label="昵称" />
                <el-table-column prop="number" label="分数" />
                <el-table-column prop="" label="操作">
                  <template slot-scope="scope">
                    <div class="flex">
                      <p style="color: #97dbcc;cursor: pointer;">同意</p>
                      <p style="color: red;cursor: pointer;">拒绝</p>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="homeBottom">
          <div class="botBox">
            <div class="botBoxTitle">
              <p>管理</p>
            </div>
            <div class="botSousuoBox">
              <div class="headItem">
                <p style="width: 31%;">昵称</p>
                <el-input v-model="memo" placeholder="~~" />
              </div>
              <div class="headItem">
                <el-button type="primary">修改备注</el-button>
              </div>
              <div class="headItem headItemTow">
                <el-checkbox v-model="checked" />
                <p>假人</p>
              </div>
              <div class="headItem">
                <el-button type="primary">隐藏0分玩家</el-button>
              </div>
              <div class="headItem">
                <p style="width: 31%;">积分</p>
                <el-input v-model="memo" placeholder="" />
              </div>
              <div class="headItem">
                <el-button type="primary">修改</el-button>
              </div>
              <div class="headItem">
                <el-button type="primary">手动停猜</el-button>
              </div>
              <div class="headItem">
                <el-button type="primary">内容核对</el-button>
              </div>

              <div class="headItem">
                <el-button type="primary">填入开奖</el-button>
              </div>
              <div class="headItem">
                <el-button type="primary">清除所有下注</el-button>
              </div>
            </div>
          </div>
          <div class="xiazhuButt">
            <p>加拿大28</p>
            <div class="xiazhuButtqiu">
              <div class="xiazhuButtqiuIt">
                6
              </div>
              <p>+</p>
              <div class="xiazhuButtqiuIt">
                7
              </div>
              <p>+</p>
              <div class="xiazhuButtqiuIt">
                9
              </div>
              <p>=</p>
              <div class="xiazhuButtqiuIt">
                22
              </div>
            </div>
            <div class="textBox" style="background-color: #00a7dc;">
              大
            </div>
            <div class="textBox" style="background-color: #eca31d;">
              双
            </div>
            <p style="margin-left: 10px;">距第<span>213974897</span>期开奖时间：<span>01:39</span></p>
            <p style="margin-left: 10px;">更多</p>
            <div class="headItem">
              <el-button type="primary">设置本期无效</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {
  AppMain,
  Navbar,
  Settings,
  Sidebar,
  TagsView
} from '../../layout/components'
import {
  mapState
} from 'vuex'
export default {
  name: 'Index',
  components: {
    AppMain,
    Navbar,
    Settings,
    Sidebar,
    TagsView
  },
  computed: {
    ...mapState({
      needTagsView: state => state.settings.tagsView
    })
  },
  data() {
    return {
      memo: '',
      vipStatus: [{
        value: '0',
        label: '正常'
      }, {
        value: '1',
        label: '禁言'
      }, {
        value: '3',
        label: '黑名单'
      }],

      status: '0',
      agent: '0',
      agentList: [{
        value: '0',
        label: '全部'
      }, {
        value: '1',
        label: '非代理'
      }, {
        value: '2',
        label: '是'
      }],
      checked: false,
      auditList: [{
        name: '昵称',
        number: '分数'
      }, {
        name: '昵称',
        number: '分数'
      }, {
        name: '昵称',
        number: '分数'
      }, {
        name: '昵称',
        number: '分数'
      }, {
        name: '昵称',
        number: '分数'
      }, {
        name: '昵称',
        number: '分数'
      }, {
        name: '昵称',
        number: '分数'
      }, {
        name: '昵称',
        number: '分数'
      }],
      indexList: [{
        number: '1',
        username: 'a111222',
        photo: '/images/rebot/t018d2e92f70ebcf704.jpg',
        xizhuRe: '等待开奖',
        type: '-',
        xiazhuIfon: 0,
        xiazhuBalance: 1782,
        surplusNum: ''
      }, {
        number: '1',
        username: 'a111222',
        photo: '/images/rebot/t018d2e92f70ebcf704.jpg',
        xizhuRe: '等待开奖',
        type: '-',
        xiazhuIfon: 0,
        xiazhuBalance: 1782,
        surplusNum: ''
      }, {
        number: '1',
        username: 'a111222',
        photo: '/images/rebot/t018d2e92f70ebcf704.jpg',
        xizhuRe: '等待开奖',
        type: '-',
        xiazhuIfon: 0,
        xiazhuBalance: 1782,
        surplusNum: ''
      }, {
        number: '1',
        username: 'a111222',
        photo: '/images/rebot/t018d2e92f70ebcf704.jpg',
        xizhuRe: '等待开奖',
        type: '-',
        xiazhuIfon: 0,
        xiazhuBalance: 1782,
        surplusNum: ''
      }, {
        number: '1',
        username: 'a111222',
        photo: '/images/rebot/t018d2e92f70ebcf704.jpg',
        xizhuRe: '等待开奖',
        type: '-',
        xiazhuIfon: 0,
        xiazhuBalance: 1782,
        surplusNum: ''
      }, {
        number: '1',
        username: 'a111222',
        photo: '/images/rebot/t018d2e92f70ebcf704.jpg',
        xizhuRe: '等待开奖',
        type: '-',
        xiazhuIfon: 0,
        xiazhuBalance: 1782,
        surplusNum: ''
      }, {
        number: '1',
        username: 'a111222',
        photo: '/images/rebot/t018d2e92f70ebcf704.jpg',
        xizhuRe: '等待开奖',
        type: '-',
        xiazhuIfon: 0,
        xiazhuBalance: 1782,
        surplusNum: ''
      }, {
        number: '1',
        username: 'a111222',
        photo: '/images/rebot/t018d2e92f70ebcf704.jpg',
        xizhuRe: '等待开奖',
        type: '-',
        xiazhuIfon: 0,
        xiazhuBalance: 1782,
        surplusNum: ''
      }],
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      baseURL: ''
    }
  },
  mounted() {
    this.baseURL = process.env.VUE_APP_BASE_API
  },
  methods: {

  }
}
</script>
<style scoped lang="scss">
	@import "../../styles/handle.scss";

	.liaotianCon {
		width: 100%;
		// padding: 20px;
		// background: darkorange;
		height: 350px;
		overflow: auto;

		.word {
			display: flex;
			margin-bottom: 10px;

			img {
				width: 40px;
				height: 40px;
				margin-top: 20px;
				border-radius: 50%;
			}

			.time {
				font-size: 12px;
				color: #969698;
				margin: 0;
			}

			.info {
				width: 47%;
				margin-left: 10px;

				.message_time {
					font-size: 12px;
					color: rgba(51, 51, 51, 0.8);
					margin: 0;
					height: 20px;
					line-height: 20px;
					margin-top: -5px;
					margin-top: 5px;
				}

				.info-content {
					word-break: break-all;
					// max-width: 45%;
					display: inline-block;
					padding: 10px;
					font-size: 14px;
					background: #fff;
					position: relative;
					margin-top: 8px;
					border-radius: 4px;
				}

				//小三角形
				.info-content::before {
					position: absolute;
					left: -8px;
					top: 8px;
					content: "";
					border-right: 10px solid #fff;
					border-top: 8px solid transparent;
					border-bottom: 8px solid transparent;
				}
			}
		}

		.word-my {
			display: flex;
			justify-content: flex-end;
			margin-bottom: 60px;

			img {
				width: 40px;
				height: 40px;
				margin-top: 20px;
				border-radius: 50%;
			}

			.time {
				font-size: 12px;
				color: #969698;
				margin: 0;
			}

			.info {
				width: 90%;
				// margin-left: 10px;
				text-align: right;
				// position: relative;
				display: flex;
				align-items: flex-end;
				flex-wrap: wrap;
				flex-direction: column;

				.info-content {
					word-break: break-all;
					max-width: 45%;
					padding: 10px;
					font-size: 14px;
					// float: right;
					margin-right: 10px;
					position: relative;
					margin-top: 8px;
					background: #bd43cf;
					text-align: left;
					border-radius: 4px;
				}

				.Sender_time {
					padding-right: 12px;
					padding-top: 5px;
					font-size: 12px;
					color: rgba(51, 51, 51, 0.8);
					margin: 0;
					height: 20px;
				}

				//小三角形
				.info-content::after {
					position: absolute;
					right: -8px;
					top: 8px;
					content: "";
					border-left: 10px solid #bd43cf;
					border-top: 8px solid transparent;
					border-bottom: 8px solid transparent;
				}
			}
		}
	}
</style>
<style scoped>
	p{
		margin: 7px 0px;
	}
	.app-container {
		padding: 0;
		position: relative;
		height: calc(100vh - 56px);
	}

	/* 聊天 */
	.homeLeftBox {
		width: 20%;
		position: relative;
		height: 100vh;
	}

	.liaotianTop {
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: space-between;
		padding: 3px 10px;
		box-sizing: border-box;
		background-color: #4f3972;
	}

	.liaotianCon {
		width: 100%;
		height: calc(100vh - 100px);
		background-color: #ecedef;
	}

	.liaotianBot {
		width: 100%;
		position: absolute;
		bottom: 50px;
		padding: 5px;
		box-sizing: border-box;
		background-color: #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/deep/.liaotianBot .el-input--medium .el-input__inner {
		height: 25px;
		line-height: 25px;
		font-size: 12px;
	}

	/* qita  */
	.homeBox {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 100vh;
	}

	.homeRightBox {
		width: 80%;
		position: relative;
	}

	.homeNavBox {
		width: 100%;
		margin: 0px auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.homeNavBoxItem img {
		width: 80px;
		height: 35px;
	}

	.homeNavBoxItem {
		flex: 1;
		height: 70px;
		border-radius: 3px;
		text-align: center;
		border: 1px solid #e8e7ea;
		/* background: linear-gradient(#fffdff 30%, #fef1fe); */
	}

	.homeNavBoxItemTow {
		display: flex;
		flex: 0.6;
		align-items: center;
		justify-content: center;
	}

	.homeNavBoxItem p {
		margin: 14px 0px 5px;
		font-size: 13px;
		color: #a9a9a9;
	}

	.homeNavBoxItem h3 {
		margin: 5px 0px 5px;
		color: #a75fb4;
		font-size: 20px;
	}

	.headConBox {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.conLeftBox {
		width: 80%;
	}

	.conRightBox {
		width: 20%;
	}

	.erweimaBox {
		width: 100%;
		border: 1px solid #eeeeee;
		border-bottom: none;
		display: flex;
		justify-content: space-between;
		padding: 8px 5px;
		box-sizing: border-box;
	}

	.erweimaBoxText {
		height: 100%;
		display: flex;
		height: 110px;
		flex-direction: column;
		justify-content: space-between;
	}

	.erweimaBoxTextIt {
		color: #c345cc;
		border: 1px solid #c345cc;
		font-size: 13px;
		padding: 2px 4px;
		margin-bottom: 15px;
		border-radius: 3px;
		cursor: pointer;
		box-sizing: border-box;
	}

	.erweimaBoxTextIt:last-child {
		margin-bottom: 0px;
	}

	.erweimaBoxImg img {
		width: 100px;
		height: 100px;
		border: 2px solid #d6d6d6;
		padding: 2px;
		border-radius: 3px 3px 0px 0px;
		box-sizing: border-box;
	}

	.erweimaBoxImgIt {
		width: 100px;
		margin-top: -3px;
		padding: 4px 0px;
		border-radius: 0px 0px 5px 5px;
		box-sizing: border-box;
		color: #fff;
		font-size: 12px;
		text-align: center;
		background: linear-gradient(to left, #a73ab1 30%, #5a59b7);
	}

	.homeBottom {
		width: 100%;
		position: absolute;
		bottom: 55px;
		left: 0px;
		z-index: 88;
	}

	.xiazhuButt {
		width: 100%;
		background-color: #503c6d;
		display: flex;
		align-items: center;
		padding: 3px 10px;
		box-sizing: border-box;
	}

	.xiazhuButt p {
		color: #fff;
		font-size: 12px;
	}

	.xiazhuButt span {
		color: red;
		margin: 0px 3px;
		font-size: 12px;
	}

	.xiazhuButtqiu {
		display: flex;
		align-items: center;
		margin: 0px 5px;
		color: #fff;
		font-size: 12px;
	}

	.xiazhuButtqiuIt {
		width: 25px;
		height: 25px;
		text-align: center;
		line-height: 25px;
		border-radius: 50%;
		border: 1px solid #a589c4;
		background: linear-gradient(#9d54be, #68427d, #9d54be);
	}

	.xiazhuButtqiu p {
		margin: 0px 3px;
	}

	.textBox {
		width: 25px;
		height: 25px;
		color: #fff;
		font-size: 12px;
		text-align: center;
		line-height: 25px;
		border-radius: 2px;
		margin-right: 5px;
	}

	.botBox {
		width: 100%;
		background-color: #fff;
		border: 1px solid #eeeeee;
	}

	.botBoxTitle {
		padding: 3px 5px;
		box-sizing: border-box;
		font-size: 13px;
		color: #333;
		border-bottom: 1px solid #eeeeee;
	}

	.flex {
		display: flex;
		justify-content: space-between;
	}

	.rightTitle {
		font-size: 14px;
		color: #333;
		padding: 6.5px 5px;
		border: 1px solid #eeeeee;
		box-sizing: border-box;
	}

	/deep/.el-range-editor--medium.el-input__inner {
		height: 25px;
	}

	.rightTitle p,
	.botBoxTitle p {
		margin: 0;
	}

	.rightFormBox {
		height: ;
	}

	.leftSousuoBox {
		width: 100%;
		display: flex;
		margin-bottom: 5px;
		align-items: center;
		justify-content: flex-end;
	}

	.botSousuoBox {
		width: 100%;
		display: flex;
		padding: 5px 0px;
		box-sizing: border-box;
		align-items: center;
	}

	.dfs {
		display: flex;
		align-items: center;
		padding: 0 0px 0px 10px;
		box-sizing: border-box;
	}

	.playerNum {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 10px;
		justify-content: flex-end;
	}

	.playerNumRight {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 13px;
	}

	.headItem,
	.headItemThree {
		display: flex;
		align-items: center;
		font-size: 13px;
		font-weight: 500;
	}

	.headItem p,
	.headItemThree p {
		width: 13%;
		margin: 0 5px;
	}

	.playerForm {
		margin-top: 10px;
	}

	/deep/.playerForm .el-button--mini {
		padding: 5px 11px;
	}

	.moreButton {
		padding: 5px 5px !important;
	}

	.dafsf {
		width: 80px;
		height: 130px;
		background-color: #fff;
		position: absolute;
		top: 50px;
		left: 50%;
		z-index: 22;
		display: none;
	}

	.photo {
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}

	/deep/.headItem .el-button--medium {
		padding: 5px 6px;
		font-size: 12px;
		margin-left: 5px;
		background-color: #c345cc;
		border-radius: 4px;
		border-color: #c345cc;
	}

	.headItemTow {
		margin-left: 5px;
	}

	.headItemTow p {
		margin-left: 5px;
		width: 70%;
	}

	/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #c345cc;
		border-color: #c345cc;
	}

	/deep/.el-table__body tr,
	.el-table__body td {
		padding: 0;
		height: 20px;
	}

	/deep/.headItem .el-input--medium .el-input__inner {
		height: 25px;
		line-height: 25px;
		width: 85px;
		font-size: 12px;
		padding-left: 10px;
	}

	/deep/.headItemThree .el-input--medium .el-input__inner {
		height: 25px;
		line-height: 25px;
		width: 130px;
		font-size: 12px;
	}

	/deep/.el-input--medium .el-input__icon {
		line-height: 25px;
	}

	/deep/.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 130px;
	}

	/deep/.selectBox .el-input--medium .el-input__inner {
		width: 80px;
	}

	/deep/.el-select .el-input .el-select__caret {
		margin-top: 0px;
	}

	/deep/.el-select .el-input .el-select__caret.is-reverse {
		margin-top: 0px;
	}

	/deep/.el-table th,
	.el-table td {
		padding: 0px;
	}

	/deep/.el-table--medium th,
	.el-table--medium td {
		padding: 0px !important;
	}

	/deep/.el-table th>.cell {
		padding: 2px 0px;
		color: #fff;
		font-size: 13px;
		text-align: center;
		color: #333;
		background-color: #ececec;
	}

	/deep/.el-table .cell {
		text-align: center;
		line-height: 20px;
	}

	/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
		background: #f4f3fb;
		border-right: 1px solid #f4f4f4;
	}

	/deep/.playerForm .el-table th .is-leaf,
	.el-table td {
		border-bottom: none !important;
		border-right: 1px solid #f4f4f4;
	}

	/deep/.playerForm .el-button--primary {
		background-color: #c345cc;
		border-color: #c345cc;
	}

	/deep/.playerForm .el-button--danger {
		background-color: #c345cc;
		border-color: #c345cc;
	}

	/deep/.playerForm .el-button--warning {
		background-color: #c345cc;
		border-color: #c345cc;
	}

	/deep/.playerForm .el-button {
		margin-left: 0;
		margin-bottom: 5px;
		margin-right: 5px;
	}

	/deep/.playerForm .el-table .cell {
		text-align: center;
	}

	/deep/.playerNumRight .el-input--medium .el-input__inner {
		height: 30px;
		line-height: 30px;
		width: 70px;
		margin: 0 5px;
		font-size: 12px;
	}

	.remarkInput {
		height: 25px;
		line-height: 25px;
		width: 150px;
		font-size: 13px;
		padding-left: 10px;
	}

	/deep/.remarkInput .el-input__inner {
		height: 25px;
		text-align: center;
		line-height: 25px;
	}

	/deep/.el-pager li.active {
		color: #c345cc;
	}

	/deep/.el-pager li:hover {
		color: #c345cc;
	}

	/deep/.el-pagination .btn-prev:hover {
		color: #c345cc;
	}

	/deep/ .el-pagination .btn-next:hover {
		color: #c345cc;
	}

	/deep/.playerNum .el-select .el-input .el-select__caret {
		margin-top: 0px;
	}

	/deep/.el-select-dropdown__item.selected {
		color: #c345cc !important;
	}

	.leftFormBox {
		width: 100%;
	}

	.formList {
		display: flex;
		align-items: center;
		background-color: #ececec;
		width: 100%;
		cursor: pointer;
		margin-bottom: 5px;
		padding: 8px 5px;
		box-sizing: border-box;
		font-size: 14px;
		justify-content: space-between;
	}
	.formListIt{
		color: #333;
	}
	.formListIt:first-child{
		color: #bd4bca;
	}
	.formListIt:last-child{
		color: #d15c64;
	}
	.showListBox{
		width: 100%;
		background-color: #fff;
		font-size: 14px;
	}
	.showListHear{
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 4px 5px;
		box-sizing: border-box;
		font-size: 14px;
		border-bottom: 1px solid #eeeeee;
		justify-content: space-between;
	}
	.showListHearIt{
		flex: 1;
		display: flex;
		align-items: center;
	}
	.showListHearIt:last-child{
		flex: 1.5;
		justify-content: flex-end;
	}
</style>
